<template>
  <el-container v-loading="loading" class="container">
    <!-- 开窗选择器 -->
    <!--
        使用v-if ：
        在关闭时保证组件销毁，由于官方destroy-on-close是在关闭时重新加载，
        会出现数据读取问题，所以用v-if处理
    -->
    <!-- 操作菜单 -->
    <el-header height="48px">
      <span class="ik-info-title">
        <span class="svg-container ik-info-icon">
          <svg-icon icon-class="file"/>
        </span>
      </span>
      <el-button-group class="ik-list-menu">
        <el-button class="ik-list-menu-btn" size="medium" :disabled="mode == 'edit'" @click="create">新增</el-button>
        <el-button class="ik-list-menu-btn" size="medium" :disabled="mode == 'edit'" @click="update">修改</el-button>
        <el-button class="ik-list-menu-btn" size="medium" :disabled="mode == 'edit'" @click="copy">复制</el-button>
        <el-button class="ik-list-menu-btn" size="medium" :disabled="mode == 'details'" @click="save">保存</el-button>
        <el-button class="ik-list-menu-btn" size="medium" :disabled="mode == 'details'" @click="cancel">取消</el-button>
        <el-button class="ik-list-menu-btn" size="medium" @click="quit">退出</el-button>
      </el-button-group>
    </el-header>

    <!-- 单据内容 -->
    <el-main>
      <!-- 表头 -->
      <el-form
        id="ik-info-head"
        v-model="data.head"
        class="ik-info-head"
        :inline="true"
        label-width="120px"
        :disabled="mode == 'details'"
        @validate="validate"
      >
        <el-row>
          <!-- ID -->
          <el-col :span="6">
            <ik-form-id
              :ref="'input_id'"
              v-model="data.head['id']"
              code="id"
              name="ID"
              :default-value="0"
              :min-length="0"
              :max-length="20"
              :disabled="false"
              :require="true"
              @onFieldChange="onFieldChange"
            />
          </el-col>
          <!-- 隐藏 -->
          <el-col :span="6">
            <ik-form-hidden
              :ref="'input_hidden'"
              v-model="data.head['hidden']"
              code="hidden"
              name="隐藏"
              default-value=""
              :min-length="0"
              :max-length="20"
              :disabled="false"
              :require="true"
              @onFieldChange="onFieldChange"
            />
          </el-col>
          <!-- 文本 -->
          <el-col :span="6">
            <ik-form-text
              :ref="'input_text'"
              v-model="data.head['text']"
              code="text"
              name="文本"
              default-value=""
              :min-length="0"
              :max-length="20"
              :disabled="false"
              :require="true"
              :rules="[{code:'phone', message:'与手机号格式不一致'}]"
              @onFieldChange="onFieldChange"
            />
          </el-col>
          <!-- 密码 -->
          <el-col :span="6">
            <ik-form-password
              :ref="'input_password'"
              v-model="data.head['password']"
              code="password"
              name="密码"
              default-value=""
              :min-length="0"
              :max-length="20"
              :disabled="false"
              :require="true"
              :rules="[{code:'phone', message:'与手机号格式不一致'}]"
              @onFieldChange="onFieldChange"
            />
          </el-col>
          <!-- 数值 -->
          <el-col :span="6">
            <ik-form-number
              :ref="'input_number'"
              v-model="data.head['number']"
              code="number"
              name="数值"
              :default-value="0"
              :disabled="false"
              :require="true"
              @onFieldChange="onFieldChange"
            />
          </el-col>
        </el-row>
        <el-row>
          <!-- 日期 -->
          <el-col :span="6">
            <ik-form-date
              ref="input_date"
              v-model="data.head['date']"
              code="date"
              name="日期"
              default-value=""
              format="yyyy-MM-dd"
              :disabled="false"
              :require="true"
              @onFieldChange="onFieldChange"
            />
          </el-col>
          <!-- 时间 -->
          <el-col :span="6">
            <ik-form-time
              ref="input_time"
              v-model="data.head['time']"
              code="time"
              name="时间"
              default-value=""
              format="HH-mm-ss"
              :disabled="false"
              :require="true"
              @onFieldChange="onFieldChange"
            />
          </el-col>
          <!-- 时间日期 -->
          <el-col :span="6">
            <ik-form-datetime
              ref="input_datetime"
              v-model="data.head['datetime']"
              code="datetime"
              name="时间日期"
              default-value=""
              format="yyyy-MM-dd HH:mm:ss"
              :disabled="false"
              :require="true"
              @onFieldChange="onFieldChange"
            />
          </el-col>
        </el-row>
        <el-row>
          <!-- 下拉 -->
          <el-col :span="6">
            <ik-form-select
              :ref="'input_select'"
              v-model="data.head['select']"
              code="select"
              name="下拉"
              default-value=""
              key-field="key"
              value-field="value"
              :options="toJson(jsonStr.sexSign)"
              :disabled="false"
              :require="true"
              @onFieldChange="onFieldChange"
            />
          </el-col>
          <!-- 复选 -->
          <el-col :span="9">
            <ik-form-check
              :ref="'input_check'"
              v-model="data.head['check']"
              code="check"
              name="复选"
              default-value=""
              key-field="key"
              value-field="value"
              :options="toJson(jsonStr.sexSign)"
              :disabled="false"
              :require="true"
              @onFieldChange="onFieldChange"
            />
          </el-col>
          <!-- 单选 -->
          <el-col :span="9">
            <ik-form-radio
              :ref="'input_radio'"
              v-model="data.head['radio']"
              code="radio"
              name="单选"
              default-value=""
              key-field="key"
              value-field="value"
              :options="toJson(jsonStr.sexSign)"
              :disabled="false"
              :require="true"
              @onFieldChange="onFieldChange"
            />
          </el-col>
        </el-row>
      </el-form>

      <!-- 表身 -->
      <el-tabs
        v-show="showBody"
        ref="ik-info-body"
        v-model="currentTab"
        :style="{ margin:'0'}"
        type="card"
      >
        <el-tab-pane
          key="item1"
          name="item1"
          label="子表1"
        >
          <el-table
            ref="table"
            v-loading="loading"
            :data="data.body['item1']"
            element-loading-text="加载中..."
            :stripe="true"
            :border="true"
            :fit="true"
            class="ik-list-table"
            :header-row-class-name="'ik-list-table-header-row'"
            :header-cell-class-name="'ik-list-table-header-cell'"
            :row-class-name="'ik-list-table-body-row'"
            :cell-class-name="'ik-list-table-body-cell'"
            :highlight-current-row="true"
          >
            <!-- 操作区 -->
            <el-table-column
              v-if="mode !== 'details'"
              prop="pluss"
              label="操作"
              width="180"
            >
              <template v-slot:header>
                <div class="button-action">
                  <span style="padding:0px 12px;">操作</span>
                  <el-button circle
                             :style="{width:'26px',height:'26px',color:'#409EFF',padding:'3px 0','margin-top':'3px'}"
                             title="添加首行" @click="addRow(bodyMap[0].key, -1)"
                  >+
                  </el-button>
                </div>
              </template>
              <template slot-scope="scope">
                <div class="button-action">
                  <el-button circle
                             :style="{width:'28px',height:'28px',color:'#409EFF',padding:'3px 0','margin-top':'3px'}"
                             @click.stop="addRow(bodyMap[0].key, scope.$index)"
                  >+
                  </el-button>
                  <el-button circle
                             :style="{width:'28px',height:'28px',color:'#409EFF',padding:'3px 0','margin-top':'3px'}"
                             @click.stop="delRow(bodyMap[0].key, scope.$index)"
                  >-
                  </el-button>
                </div>
              </template>
            </el-table-column>

            <!-- ID -->
            <ik-column-id
              code="id"
              name="ID"
              :require="true"
              :edit="mode != 'details'"
              @onFieldChange="onBodyFieldChange"
            />
            <!-- 隐藏 -->
            <ik-column-hidden
              code="hidden"
              name="隐藏"
              :require="true"
              :edit="mode != 'details'"
              @onFieldChange="onBodyFieldChange"
            />
            <!-- 文本 -->
            <ik-column-text
              code="text"
              name="文本"
              :require="true"
              :edit="mode != 'details'"
              @onFieldChange="onBodyFieldChange"
            />
            <!-- 密码 -->
            <ik-column-password
              code="password"
              name="密码"
              :require="true"
              :edit="mode != 'details'"
              @onFieldChange="onBodyFieldChange"
            />
            <!-- 数值 -->
            <ik-column-number
              code="number"
              name="数值"
              :require="true"
              :edit="mode != 'details'"
              @onFieldChange="onBodyFieldChange"
            />

            <!-- 日期 -->
            <ik-column-date
              code="date"
              name="日期"
              :require="true"
              :edit="mode != 'details'"
              @onFieldChange="onBodyFieldChange"
            />
            <!-- 时间 -->
            <ik-column-time
              code="time"
              name="时间"
              :require="true"
              :edit="mode != 'details'"
              @onFieldChange="onBodyFieldChange"
            />
            <!-- 时间日期 -->
            <ik-column-datetime
              code="datetime"
              name="时间日期"
              :require="true"
              :edit="mode != 'details'"
              @onFieldChange="onBodyFieldChange"
            />

            <!-- 下拉 -->
            <ik-column-select
              code="select"
              name="下拉"
              key-field="key"
              value-field="value"
              :options="toJson(jsonStr.sexSign)"
              :edit="mode != 'details'"
            />
            <!-- 复选 -->
            <ik-column-check
              code="check"
              name="复选"
              key-field="key"
              value-field="value"
              :options="toJson(jsonStr.sexSign)"
              :edit="mode != 'details'"
            />
            <!-- 单选 -->
            <ik-column-radio
              code="radio"
              name="单选"
              key-field="key"
              value-field="value"
              :options="toJson(jsonStr.sexSign)"
              :edit="mode != 'details'"
            />
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-divider content-position="left">富文本编辑器</el-divider>
      <ik-form-editor v-model="content" />
    </el-main>

    <!-- 单据信息 -->
    <el-footer height="36px">
      <el-row class="ik-info-info" :gutter="0">
        <el-col :span="12" class="ik-info-enterprise-info">
          <span style="float: left">单据信息</span>
        </el-col>
        <el-col :span="12" class="ik-info-data-info">
          <span v-if="id !== ''" style="float: right">
            创建人：{{ data.head.entryPerson || '' }} 创建时间：{{ data.head.entryTime || '' }}
            修改人：{{ data.head.modifyPerson || '' }} 修改时间：{{ data.head.modifyTime || '' }}
          </span>
        </el-col>
      </el-row>
    </el-footer>

  </el-container>
</template>

<script>
// 表单组件
import IkFormId from '@/components/ik/form/input/IkFormId'
import IkFormHidden from '@/components/ik/form/input/IkFormHidden'
import IkFormText from '@/components/ik/form/input/IkFormText'
import IkFormPassword from '@/components/ik/form/input/IkFormPassword'
import IkFormNumber from '@/components/ik/form/input/IkFormNumber'
import IkFormDate from '@/components/ik/form/input/IkFormDate'
import IkFormDatetime from '@/components/ik/form/input/IkFormDatetime'
import IkFormTime from "@/components/ik/form/input/IkFormTime"
import IkFormSelect from '@/components/ik/form/input/IkFormSelect'
import IkFormCheck from '@/components/ik/form/input/IkFormCheck'
import IkFormRadio from '@/components/ik/form/input/IkFormRadio'

import IkColumnId from '@/components/ik/table/ikColumn/IkColumnId'
import IkColumnHidden from '@/components/ik/table/ikColumn/IkColumnHidden'
import IkColumnText from '@/components/ik/table/ikColumn/IkColumnText'
import IkColumnPassword from '@/components/ik/table/ikColumn/IkColumnPassword'
import IkColumnNumber from '@/components/ik/table/ikColumn/IkColumnNumber'
import IkColumnDate from '@/components/ik/table/ikColumn/IkColumnDate'
import IkColumnDatetime from '@/components/ik/table/ikColumn/IkColumnDatetime'
import IkColumnTime from '@/components/ik/table/ikColumn/IkColumnTime'
import IkColumnSelect from '@/components/ik/table/ikColumn/IkColumnSelect'
import IkColumnCheck from '@/components/ik/table/ikColumn/IkColumnCheck'
import IkColumnRadio from '@/components/ik/table/ikColumn/IkColumnRadio'

export default {
  name: 'IkInfoPage',
  components: {
    // 表单组件
    IkFormId,
    IkFormHidden,
    IkFormText,
    IkFormPassword,
    IkFormNumber,
    IkFormDate,
    IkFormDatetime,
    IkFormTime,
    IkFormSelect,
    IkFormCheck,
    IkFormRadio,
    // 表格组件
    IkColumnId,
    IkColumnHidden,
    IkColumnText,
    IkColumnPassword,
    IkColumnNumber,
    IkColumnDate,
    IkColumnDatetime,
    IkColumnTime,
    IkColumnSelect,
    IkColumnCheck,
    IkColumnRadio
  },
  props: {
    model: {
      type: String,
      default: ''
    },
    entity: {
      type: String,
      default: ''
    },
    defaultMode: {
      type: String,
      default: ''
    },
    defaultId: {
      type: String,
      default: ''
    },
    buttonList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      content: "",
      // 加载标识
      loading: false,
      // 开窗控制
      popupListVisible: false,
      popupModel: '',
      popupEntity: '',
      popupExpression: {},
      valueExpression: {},
      // 是否显示子表
      showBody: true,
      // 状态（add / edit / details）
      mode: 'details',
      validate: [],
      // 数据ID
      id: '',
      // Json字符串
      jsonStr: {
        sexSign: '[{"key": "1", "value": "男"}, {"key": "2", "value": "女"}]'
      },
      // 数据内容
      data: {
        head: {
          'id': 1, 'hidden': 'hidden1', 'text': '测试文本', 'password': '123456', 'number': 1,
          'date': '2024-11-01', 'time': '21:00:00', 'datetime': '2024-11-01 21:00:00',
          'select': '1', 'check': '1', 'radio': '1'
        },
        body: {
          "item1": [
            {
              'id': 1, 'hidden': 'hidden1', 'text': '测试文本1', 'password': '123456-1', 'number': 1,
              'date': '2024-11-01', 'time': '21:00:01', 'datetime': '2024-11-01 21:00:01',
              'select': '1', 'check': '1', 'radio': '1'
            },
            {
              'id': 2, 'hidden': 'hidden1', 'text': '测试文本2', 'password': '123456-2', 'number': 2,
              'date': '2024-11-02', 'time': '21:00:02', 'datetime': '2024-11-02 21:00:02',
              'select': '1', 'check': '1', 'radio': '1'
            },
            {
              'id': 3, 'hidden': 'hidden1', 'text': '测试文本3', 'password': '123456-3', 'number': 3,
              'date': '2024-11-03', 'time': '21:00:03', 'datetime': '2024-11-01 21:00:03',
              'select': '1', 'check': '1', 'radio': '1'
            },
            {
              'id': 4, 'hidden': 'hidden1', 'text': '测试文本4', 'password': '123456-4', 'number': 4,
              'date': '2024-11-04', 'time': '21:00:04', 'datetime': '2024-11-01 21:00:04',
              'select': '1', 'check': '1', 'radio': '1'
            }
          ]
        }
      },
      // 子表清单
      bodyMap: [{ key: 'item1', name: '子表1' }, { key: 'item2', name: '子表2' }],
      // 当前表身
      currentTab: 'item1',
      // 操作数据
      tableData: {
        // 仅当前点击的行数据：{'code':'1', 'name':'tom'}
        clickRow: {},
        // 每个子表（含明细表最后一次点击的数据）：{'tableCode1': {'code':'1', 'name':'tom'}, 'tableCode2': {'code':'1', 'name':'tom'}}
        currentTableData: {}
      },
      // 其他属性
      tabsHeight: '200px',
      verify: {
        head: {},
        body: {}
      }
    }
  },
  computed: {},
  mounted() {
  },
  created() {
  },
  methods: {
    // 工具方法 - 转为json
    toJson(jsonStr) {
      return JSON.parse(jsonStr)
    },
    // 表格刷新事件
    refreshData() {
      // 重新加载数据
    },
    // 表格行点击事件
    onItemRowClick(tableKey, data) {
      this.$set(this.tableData, 'clickRow', data)
      this.$set(this.tableData.currentTableData, tableKey, data)
    },
    // 菜单栏功能
    create() {
      // 清空数据
      this.data = {
        head: {},
        body: {}
      }
      this.id = ''
      // 修改为添加模式
      this.mode = 'add'
    },
    update() {
      // 修改为编辑模式
      this.mode = 'edit'
    },
    copy() {
      // 清空ID
      this.data.head.id = null
      this.id = ''
      // 修改为添加模式
      this.mode = 'add'
    },
    save() {
      // 验证
      for (const headInd in this.verify.head) {
        if (this.verify.head[headInd]) {
          return
        }
      }
      for (const bodyInd in this.verify.body) {
        if (this.verify.body[bodyInd]) {
          return
        }
      }
      alert('此处执行保存')
    },
    cancel() {
      // 修改为详情模式
      this.mode = 'details'
      this.refreshData()
    },
    quit() {
      this.$emit('onInfoQuitMethod')
    },
    // ===== ===== ===== ===== 子表行维护 ===== ===== ===== =====
    // 新增行按钮
    addRow(currt, index) {
      this.data.body[currt].splice(index + 1, 0, {})
    },
    // 删除行按钮
    delRow(currt, index) {
      this.data.body[currt].splice(index, 1)
      for (const item in this.verify.body) {
        console.log(item)
        if (item.startsWith('item1' + '-' + index + '-')) {
          delete this.verify.body[item]
        }
      }
    },
    // ===== ===== ===== ===== 字段监听 ===== ===== ===== =====
    // 字段变更事件
    onFieldChange(fieldName, oldValue, newValue, errorSign, errorMessage) {
      // 设置
      this.verify.head['head' + '-' + fieldName] = errorSign
      this.$emit('onFieldChange', fieldName, oldValue, newValue)
    },
    // 子表字段变更事件
    onBodyFieldChange(line, fieldName, oldValue, newValue, errorSign, errorMessage) {
      // 设置
      this.verify.body['item1' + '-' + line + '-' + fieldName] = errorSign
      this.$emit('onBodyFieldChange', line, fieldName, oldValue, newValue)
    }
  }
}
</script>

<style lang="scss">
@import "~@/styles/listinfo.scss";

.data-directory-tabs-info {
  height: calc(100% - 60px);
}

.data-directory-tabs-info .el-tabs__content {
  height: calc(100% - 53px);
  overflow: auto;
  min-height: 350px;
}
</style>
